<template>
    <section>
        <topNav></topNav>
        <ul class="top-banner">
            <li v-for="(topBannerList,index) in topBannerLists">
                <img :src="topBannerList.pic" />
                <p>{{topBannerList.title}}</p>
            </li>
        </ul>
        <ul class="type">
            <li v-for="(typeList,index) in typeLists">
                <p>
                    <img :src="typeList.pic" />
                </p>
                <span>{{typeList.title}}</span>
            </li>
        </ul>
        <div class="guess-like">
            <p></p>
            <shopList :datass="likeLists"></shopList>
        </div>
    </section>
</template>

<script>
import topNav from "../common/nav";
import shopList from "../common/shopList";

export default {
    components: {
        topNav,
        shopList
    },
    data() {
        return {
            txt: "",
            typeLists: [],
            txtList: [],
            topBannerLists: [],
            likeLists: []
        };
    },
    mounted() {
        this.$http.get("./data/public.json").then(res => {
            this.txtList = res.data.content;
        });

        this.$http.get("./data/mall.json").then(res => {
            this.topBannerLists = res.data.topBanner;
            this.typeLists = res.data.type;
            this.likeLists = res.data.likeList;
        });

        let timer = setInterval(() => {
            let num = parseInt(Math.random() * this.txtList.length);
            this.txt = this.txtList[num];
        }, 3000);

        // 通过$onec这个事件侦听器在定义完定时器之后的位置来清除定时器
        this.$once("hook:beforeDestroy", () => {
            clearInterval(timer);
        });
    }
};
</script>

<style scoped lang="scss">
$theme-color: #ff0176;

.nav {
    display: flex;
    height: 30px;
    padding: 10px 15px;
    justify-content: space-between;
    border-bottom: 1px solid rgb(219, 219, 219);
    .left,
    .right {
        display: inline-block;
        width: 22px;
        height: 100%;
    }
    .left {
        background: url("../../assets/images/home-menu_40x37.png") no-repeat
            center;
        background-size: contain;
    }
    .right {
        background: url("../../assets/images/home-chat.png") no-repeat center;
        background-size: contain;
    }
    .search {
        flex: 1;
        margin: 0 15px;
        input::-webkit-input-placeholder {
            /*WebKit browsers*/
            font-size: 13px;
            color: rgb(170, 170, 170);
        }

        input::-moz-input-placeholder {
            /*Mozilla Firefox*/
            font-size: 13px;
            color: rgb(170, 170, 170);
        }

        input::-ms-input-placeholder {
            /*Internet Explorer*/
            font-size: 13px;
            color: rgb(170, 170, 170);
        }
    }
    p {
        display: flex;
        height: 100%;
        align-items: center;
        background-color: #eeeeee;
        span {
            width: 15px;
            height: 100%;
            margin: 0px 10px;
            background: url("../../assets/images/home-server.png") no-repeat
                center/contain;
        }
        input {
            height: 15px;
            border: none;
            flex: 1;
            outline: none;
            background-color: #eeeeee;
        }
    }
    a {
        text-decoration: none;
    }
}

.top-banner {
    display: flex;
    justify-content: space-around;
    margin: 10px 0px;
    li {
        margin-right: 10px;
        width: 25%;
        position: relative;
        &:nth-of-type(1) {
            margin-left: 10px;
        }
        img {
            width: 100%;
        }
        p {
            position: absolute;
            bottom: 5px;
            left: 0px;
            width: 100%;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            color: white;
        }
    }
}

.type {
    // margin:5px 15px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
        text-align: center;
        width: 20%;
        margin-bottom: 12px;
        p {
            width: 50px;
            height: 50px;
            display: inline-block;
            img {
                width: 100%;
            }
        }
        span {
            display: block;
            font-size: 12px;
            color: rgb(90, 90, 90);
        }
    }
}

.guess-like {
    padding-top: 5px;
    background-color: #efefef;
    & > p {
        width: 100%;
        height: 30px;
        padding-bottom: 20px;
        background: url("../../assets/images/mall/mall-guess.webp") no-repeat
            center/contain;
    }
}
</style>

<style lang="scss">
.guess-like {
    .pic {
        span {
            display: none;
        }
    }
}
</style>
